<!doctype html>
<html>
  <head>
    <title>Binance Trader Bot</title>
  <link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>    
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
  <script src="js/bootstrap-notify.min.js"></script>
  </head>
  <body>
      <div class="row">
        <div class="col-sm-6">   
    	   <h2>Market <span class="badge" id="status">Offline</span></h2>
        </div>
        <div class="col-sm-2 media-middle">
          <label class="switch media-middle">
            <input type="checkbox" id="showAlerts">
            <span class="slider round"></span>
          </label>
          <label class="">Show BTC Scanner Alerts</label>
        </div>
      </div>
    <div id="jsGrid"></div>
  	<h2>Orders</h2>
    <div id="jsGridOrders"></div>  

  </body>
  <script src="/socket.io/socket.io.js"></script>

  <script>
 	$(function () {
    	var socket = io();
    	/*
    	$('form').submit(function(){
      		socket.emit('chat message', $('#m').val());
      		$('#m').val('');
      		return false;
    	});
    	*/
      socket.on('connect', function(socket){
        $('#status').text('Online');
      });
      socket.on('disconnect', function(){
        $('#status').text('Offline');
      });
    	socket.on('update', function(msg){    		
          var items = $("#jsGrid").jsGrid("option", "data");
          var item = items.filter(x => x.symbol === msg.symbol);
          if (item.length == 0) {
            $("#jsGrid").jsGrid("insertItem", msg).done(function() {
              //console.log("insertion completed");
            });
          } else {
            $("#jsGrid").jsGrid("updateItem", item[0], msg).done(function() {
              //console.log("update completed");
            });   
          }
    	});
    	socket.on('orders', function(msg){
        console.log(msg);
        var items = $("#jsGridOrders").jsGrid("option", "data");
        var item = items.filter(x => (x.symbol === msg.symbol && x.orderIdBuy === msg.orderIdBuy));
        if (item.length == 0) {        
          $("#jsGridOrders").jsGrid("insertItem", msg).done(function() {
              //console.log("insertion completed");
            });
          } else {
            $("#jsGridOrders").jsGrid("updateItem", item[0], msg).done(function() {
              //console.log("update completed");
            });   
          }              
    	 });
      socket.on('scanner', function(msg){
        if ($("#showAlerts")[0].checked) {
          $.notify({
            // options
            message: msg.message 
          },{
            // settings
            type: msg.type
          });  
        }        
      });

  	});
    $("#showAlerts")[0].checked = true;
  </script>
<script>
    $("#jsGrid").jsGrid({
        width: "100%",
        height: "300px",
 
        inserting: false,
        editing: false,
        sorting: false,
        paging: false, 
        filtering: false,     
 
        fields: [
            { name: "symbol", title: "Symbol", type: "text" },
            { name: "mode", title: "Mode", type: "text", width:50},            
            { name: "buyQty",title: "Buy Quantity", type: "text" },
            { name: "increasing",title: "Increasing", type: "text" },
            { name: "decreasing",title: "Decreasing", type: "text"},
            { name: "profit",title: "Preferred Profit", type: "text" },
            { name: "stopLoss",title: "Stop Loss", type: "text", width:50},
            { name: "lastPrice",title: "Price", type: "text" },
            { name: "buyPrice",title: "Buy Price", type: "text" },
            { name: "profitableSellingPrice",title: "Sell Price", type: "text" },
            { name: "lastBid",title: "Bid", type: "text" },
            { name: "lastAsk",title: "Ask", type: "text" },
            { name: "spreadPerc",title: "Spread", type: "text"},
            { name: "originalsellprice",title: "Original Sell Price", type: "text" },
        ]
    });
    $("#jsGridOrders").jsGrid({
        width: "100%",
        height: "500px",
 
        inserting: false,
        editing: false,
        sorting: false,
        paging: false, 
        filtering: false,     
 
        fields: [
            { name: "symbol", title: "Symbol", type: "text" },
            { name: "orderIdBuy", title: "Order Id Buy", type: "text" },
            { name: "statusBuy", title: "Status Buy", type: "text" },
            { name: "buyPrice", title: "Buy Price", type: "text" },
            { name: "orderIdSell", title: "Order Id Sell", type: "text" },
            { name: "statusSell", title: "Status Sell", type: "text" },
            { name: "sellPrice", title: "Sell Price", type: "text" },
            { name: "profit", title: "Profit", type: "text" },
        ]
    });    
</script>  
</html>